<template>
	<view class="container">
		<view class="content">
			<scroll-view scroll-y class="list" @scrolltolower="scrollBottom" style="height: 100%">
				<view class="header flex_between">
					<view class="logo">Funding</view>
					<view class="opt_icon flex">
						<view class="icon_item flex_center"><u-icon name="search" size="22" @tap="toServe"></u-icon>
						</view>
						<view class="icon_item flex_center"><u-icon name="kefu-ermai" size="22"
								@tap="toServeTwo"></u-icon>
						</view>
					</view>
				</view>
				<view class="swiper_box">
					<swiper autoplay circular :interval="3000" :duration="500" :current="current"
						@change="swiperChange">
						<swiper-item v-for="item in swiperList" :key="item.id">
							<image class="swiper_img" :src="item.image"></image>
						</swiper-item>
					</swiper>
					<view class="swiper_dots flex">
						<view class="dots_item" :class="current==i-1?'active_dot':''" v-for="i in swiperList.length"
							@tap="changeCurrent(i)"></view>
					</view>
				</view>
				<!-- 热门 -->
				<view class="sort">
					<view class="sort_header flex_between">
						<view class="sort_title">热门</view>
						<uni-icons type="forward" color="#0065ff" size="20" @tap="toList"></uni-icons>
					</view>
					<view class="hot_list flex_between">
						<view class="hot_item" v-for="item in hotStockList" @tap="toDetail(item.id)">
							<view class="title font_title">{{item.name}}</view>
							<view class="chart">
								<echart-view :data="item.kline" :id="item.id"
									:color="item.rate>0?'up':'down'"></echart-view>
							</view>
							<view class="detail flex">
								<view class="detail_item col_center">
									<view class="text">sell</view>
									<view class="data" :class="item.rate>0?'up':'down'">{{item.sell_price}}</view>
								</view>
								<view class="detail_item col_center">
									<view class="text">buy</view>
									<view class="data" :class="item.rate>0?'up':'down'">{{item.buy_price}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 行情 -->
				<view class="sort">
					<view class="sort_header flex_between">
						<view class="sort_title">行情</view>
						<uni-icons type="forward" color="#0065ff" size="20" @tap="toList"></uni-icons>
					</view>
					<view class="price_list">
						<view class="price_item" v-for="item in stockList" @tap="toDetail(item.id)">
							<view class="item_header">
								<view class="symbol font_title">{{item.name}}</view>
								<view class="time">{{ getCurrentTime() }}</view>
							</view>
							<view class="price">
								<view class="price_new" :class="item.rate>0?'up':'down'">
									{{ item.sell_price.toString().slice(0, 9) }}
								</view>
								<view class="price_old">{{item.low}}</view>
							</view>
							<view class="price">
								<view class="price_new" :class="item.rate>0?'up':'down'">
									{{ item.buy_price.toString().slice(0, 9) }}
								</view>
								<view class="price_old">{{item.high}}</view>
							</view>
							<view class="detail" :class="item.rate>0?'bg_up':'bg_down'">{{item.rate}}%</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<tabbarView id="1"></tabbarView>
	</view>
</template>

<script>
	import tabbarView from "@/components/tabbar.vue"
	import echartView from "./components/echarts.vue"
	import {
		bannerApi,
		registerApi,
		loginApi,
		getSettingApi,
		stockListApi,
		klineApi
	} from "@/api/api.js"

	export default {
		components: {
			tabbarView,
			echartView
		},
		data() {
			return {
				page: 1,
				chartData: [],
				swiperList: [],
				current: 0, //当前所在滑块的 index
				hotStockList: [], // 存储热门股票数据
				stockList: [], // 存储行情数据
				timer: null,
			};
		},
		onShow() {
			this.getSwiper();
			this.getStockList();
			this.timer = setInterval(() => {
				this.getStockList()
			}, 3000 * 10)
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			// 滚动触底
			scrollBottom() {
				console.log("滚动到底部")
				this.page++
				this.getStockList()
			},
			getCurrentTime() {
				const currentDate = new Date();
				const hours = currentDate.getHours().toString().padStart(2, '0'); // 将小时转为字符串，并在不足两位时前面补0
				const minutes = currentDate.getMinutes().toString().padStart(2, '0'); // 同上
				const seconds = currentDate.getSeconds().toString().padStart(2, '0'); // 同上
				return `${hours}:${minutes}:${seconds}`;
			},
			// 在页面加载时调用该方法，获取行情数据
			getStockList() {
				const token = uni.getStorageSync('token');
				// 请求全部行情列表
				stockListApi({
					token,
					page: this.page,
					cate_id: '0'
				}).then(res => {
					// 处理接口返回的全部行情结果
					if (this.page == 1) {
						this.stockList = res.data.data.data
					} else {
						this.stockList = [...this.stockList, ...res.data.data.data]
					}
				});
				// 请求热门行情列表
				stockListApi({
					token,
					cate_id: '99' // 使用 '99' 表示热门
				}).then(res => {
					// 处理接口返回的热门行情结果
					this.hotStockList = res.data.data.data.slice(0, 3); // 取前三条作为热门列表
				});
			},
			getSwiper() {
				const that = this
				bannerApi().then(res => {
					that.swiperList = res.data.data
				})
			},
			swiperChange(e) {
				this.current = e.detail.current
			},
			changeCurrent(i) {
				if (this.current == i - 1) return
				this.current = i - 1
			},
			toList() {
				uni.navigateTo({
					url: "/pages/home/quotation"
				})
			},
			toServe() {
				uni.navigateTo({
					url: "/pages/home/search"
				})
			},
			toServeTwo() {
				uni.navigateTo({
					url: '/pages/webView/index?type=serve',
				});
			},
			toDetail(opt) {
				const id = opt
				uni.navigateTo({
					url: "/pages/detail/index?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.content {
			.header {
				.logo {
					font-family: Poppins-Medium;
					font-size: 50rpx;
				}

				.opt_icon {
					.icon_item {
						width: 35px;
						height: 35px;
						border-radius: 50%;
						background-color: rgba(237, 237, 237, 0.46);
						font-size: 16px;
						margin-left: 30rpx;
					}
				}
			}

			.swiper_box {
				width: 100%;
				height: 300rpx;
				margin-top: 30rpx;
				position: relative;

				.swiper_img {
					width: 100%;
					height: 300rpx;
					border-radius: 30rpx;
				}

				.swiper_dots {
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate(-50%, 50%);
					height: 40rpx;
					background-color: #fff;
					border-radius: 10px;
					padding: 0 40rpx;
					box-shadow: 0 6rpx 16rpx 0 rgba(0, 0, 0, .16);
					column-gap: 10rpx;

					.dots_item {
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #0065ff;
						transition: all .3s;
						opacity: 0.3;
					}

					.active_dot {
						width: 28rpx;
						border-radius: 8rpx;
						opacity: 1;
					}
				}
			}

			.sort {
				margin-top: 70rpx;

				.sort_header {
					margin-bottom: 30rpx;

					.sort_title {
						font-size: 32rpx;
					}
				}

				.hot_list {
					.hot_item {
						width: 32%;
						box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
						border-radius: 15px;
						padding: 10rpx 0;

						.title {
							font-size: 28rpx;
							margin-bottom: 16rpx;
							padding-left: 10rpx;
							font-family: Poppins-Medium;
						}

						.chart {
							width: 100%;
							height: 120rpx;
						}

						.detail {
							.detail_item {
								flex: 1;
								position: relative;

								.text {
									opacity: .5;
									font-size: 18rpx;
								}

								.data {
									font-size: 22rpx;
								}
							}

							.detail_item:nth-child(1)::before {
								content: "";
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
								width: 2rpx;
								height: 60%;
								background: rgba(237, 237, 237, 0.46);
							}
						}
					}
				}

				.price_list {

					.price_item {
						width: 100%;
						color: #303133;
						display: grid;
						grid-template-columns: auto 130rpx 130rpx 130rpx;
						align-items: center;
						margin-bottom: 40rpx;
						grid-column-gap: 30rpx;

						.item_header {
							.symbol {
								font-size: 28rpx;
							}

							.time {
								font-size: 20rpx;
								opacity: .3;
							}
						}

						.price {
							font-size: 28rpx;
							text-align: center;

							.price_old {
								font-size: 20rpx;
								opacity: .3;
							}
						}

						.detail {
							height: 50rpx;
							line-height: 50rpx;
							font-size: 24rpx;
							border-radius: 10rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>